<template>
  <view class="cate-container">
    <!-- 1. 顶部导航栏 -->
    <view class="nav-bar customHeader" @click="navSearch">
      <view class="nav-left">
        <image
          class="nav-icon"
          src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756021517435.png"
        />
        <text class="nav-title">手机游戏</text>
      </view>
      <image
        class="nav-search-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756021522290.png"
      />
    </view>

    <view class="mine-item" @click="navToUrl('/pages/mine/subscribe')">
      <image
        class="nav-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756108488124.png?x-oss-process=image/resize,w_200,h_200"
      />
      <view class="item-content">
        <span class="news-title">我的订阅</span>
        <span class="news-subtitle"
          >记录您历史订阅过的游戏内容，方便您快速找到</span
        >
      </view>
      <image
        class="nav-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756108595644.png?x-oss-process=image/resize,w_200,h_200"
      />
    </view>

    <view class="mine-item" @click="navToUrl('/pages/mine/newsMine')">
      <image
        class="nav-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756108488122.png?x-oss-process=image/resize,w_200,h_200"
      />
      <view class="item-content">
        <span class="news-title">消息通知</span>
        <span class="news-subtitle">您可以在这里查看消息通知</span>
      </view>
      <image
        class="nav-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756108595644.png?x-oss-process=image/resize,w_200,h_200"
      />
    </view>

    <view class="mine-item" @click="navToUrl('/pages/mine/video')">
      <image
        class="nav-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756111605891.png?x-oss-process=image/resize,w_200,h_200"
      />
      <view class="item-content">
        <span class="news-title">视频播放</span>
        <span class="news-subtitle">您可以在这里查看感兴趣的视频</span>
      </view>
      <image
        class="nav-icon"
        src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756108595644.png?x-oss-process=image/resize,w_200,h_200"
      />
    </view>

    <!-- 底部自定义tabbar -->
    <custom-tabbar
      :currentIndex="currentTabIndex"
      @tabChange="handleTabChange"
    />
  </view>
</template>

<script setup>
import CustomTabbar from "@/components/tabbar.vue";
import { showToast, tabbarTo } from "@/utils/helper";
import { ref } from "vue";

const currentTabIndex = ref(3);
const handleTabChange = (index) => {
  currentTabIndex.value = index;
  tabbarTo(index);
};
const navSearch = () => {
  uni.navigateTo({
    url: "/pages/search/index",
  });
};

const navToUrl = (url) => {
  uni.navigateTo({
    url:url,
  });
};
</script>

<style scoped>
.cate-container {
  background-color: #eee;
  height: 89vh;
  padding-bottom: 120rpx;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #4caf50;
  /* Green background */
  height: 60rpx;
}

.nav-left {
  display: flex;
  align-items: center;
  color: white;
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #eee;
}

.nav-search-icon {
  width: 40rpx;
  height: 40rpx;
}
.news-title {
  font-size: 30rpx;
  font-weight: 400;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2rpx;
}
.news-subtitle {
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #9e9e9e;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mine-item {
  display: flex;
  background-color: #fff;
  align-items: center;
  padding: 10rpx 20rpx;
  margin: 20rpx 0;
}
.item-content {
  width: 600rpx;
  display: flex;
  flex-direction: column;
}
</style>
